<template>
	<Layout showFooter>
		<template #title>发布评价</template>
		<view class="section">
			<view class="section__header">
				<image class="section__header__portrait" :src="detail.lawFirmLogo"></image>
				<view class="section__header__title">{{detail.lawFirmName}}</view>
			</view>
			<view class="section__rate" style="margin-top: 18rpx;">
				<text class="section__rate__label">专业水平：</text>
				<u-rate inactive-color="#D9D9D9" active-color="#FF710A" :count="5" size="36"
					v-model="formData.competenceRating"></u-rate>
			</view>
			<view class="section__rate">
				<text class="section__rate__label">工作态度：</text>
				<u-rate inactive-color="#D9D9D9" active-color="#FF710A" :count="5" size="36"
					v-model="formData.attitudeRating"></u-rate>
			</view>
			<view class="section__rate">
				<text class="section__rate__label">工作效率：</text>
				<u-rate inactive-color="#D9D9D9" active-color="#FF710A" :count="5" size="36"
					v-model="formData.efficiencyRating"></u-rate>
			</view>
			<view class="section__rate">
				<text class="section__rate__label">综合评价：</text>
				<u-rate inactive-color="#D9D9D9" active-color="#FF710A" :count="5" size="36"
					v-model="formData.overallRating"></u-rate>
			</view>

			<u-input type="textarea" v-model="formData.reviewContent" :custom-style="customStyleInput" placeholder="请在此评价律师服务，客观真实的评价有利于其他当事人选择律师(至少十个字符)
		"></u-input>
		</view>

		<view class="section">
			<view class="section__header">
				<view class="section__header__title">请选择律师印象</view>
			</view>
			<view class="section__tag">
				<view v-for="item of tagList" :key="item.id" class="impress-tag" :class="{selected:item.selected}"
					@click.stop="item.selected = !item.selected">
					{{item.tagName}}
				</view>
			</view>
		</view>

		<template #footer>
			<view class="common-footer">
				<u-button style="width:100%;" type="primary" size="large" :fill="true" @click="tapSubmit">提交</u-button>
			</view>
		</template>

		<u-top-tips ref="tipsRef"></u-top-tips>
		<LoginPopup></LoginPopup>
	</Layout>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	import { getLawfirmTagList } from '@/apis/lawfirm';
	import { onLoad } from '@dcloudio/uni-app';
	import { saveSpuComment } from '@/apis/common';
	import { isLogin } from '@/utils/auth';
	import { useAuthStore } from "@/stores";
	import { getOrderDetail } from '@/apis/trade';
	import type { AnyObj } from '@/types/global';
	import { useShowTipMessage } from '@/hooks/util';
	import { isEmpty } from '@/utils/util';


	const [tipsRef, showTipMessage] = useShowTipMessage();
	const authStore = useAuthStore();
	const customStyleInput = ref({
		with: '100%',
		padding: "20rpx",
		backgroundColor: '#F6F6F6',
		borderRadius: '12rpx',
		marginTop: '18rpx'
	})

	let orderId = '';
	const detail = ref<AnyObj>({});
	const tagList = ref<AnyObj[]>([]);

	const formData = ref({
		orderId: '',
		overallRating: 5,
		competenceRating: 5,
		attitudeRating: 5,
		efficiencyRating: 5,
		reviewContent: '',
		reviewTag: '',
	});

	function tapSubmit() {
		if (!isLogin()) {
			authStore.show();
			uni.showToast({
				icon: 'none',
				title: '请先登录'
			});
			return
		}
		const { reviewContent } = formData.value;
		if (reviewContent.length < 10 || reviewContent.length > 100) {
			showTipMessage('请输入评价内容，10 ~ 100 个字符', 'error');
			return;
		}


		formData.value.reviewTag = tagList.value.filter(item => item.selected).map(item => item.tagName).join(',');

		saveSpuComment({ ...formData.value }).then((res) => {
			if (res.code !== 200) {
				uni.showToast({
					icon: 'none',
					title: res.msg ?? '服务器忙，请稍后再试'
				});
				return;
			}
		}).catch((res) => {
			uni.showToast({
				icon: 'none',
				title: res.msg ?? '请重新登录'
			});
		});
		uni.redirectTo({
			url: '/pages/comment-success/comment-success'
		});
	}

	function loadData() {
		getOrderDetail(orderId).then((res) => {
			detail.value = res.data ?? {};
		});
		getLawfirmTagList().then((res) => {
			tagList.value = (res.rows ?? []).map((item) => {
				return { ...item, selected: false }
			});
		});
	}

	onLoad((options) => {
		options = options as { orderId : string };
		orderId = options.orderId;
		formData.value.orderId = options.orderId;
		loadData();
	});
</script>

<style scope lang="scss">
	.section {
		display: inline-flex;
		flex-direction: column;
		align-self: center;
		flex-shrkink: 0;
		width: 690rpx;
		padding: 30rpx;
		margin-top: 30rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 8rpx;

		&__header {
			display: inline-flex;
			align-items: center;
			flex-shrkink: 0;
			widht: 100%;

			&__portrait {
				display: inline-flex;
				flex-shrink: 0;
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			&__title {
				display: inline-flex;
				flex: 1;
				font-weight: 600;
				font-size: 32rpx;
				color: #000000;
				line-height: 38rpx;
			}
		}

		&__rate {
			display: inline-flex;
			align-items: center;
			width: 100%;
			padding: 12rpx 0;
			box-sizing: border-box;

			&__label {
				padding-right: 20rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
			}
		}


		&__tag {
			display: inline-flex;
			flex-wrap: wrap;
			width: 100%;
		}
	}
</style>